import {defineStore} from 'pinia'
import {ref, computed} from 'vue'

export enum MODULES {
    SEARCH = 'search',
    WIDGET = 'widget',
    BACKGROUND = 'background',
    COMMON = 'common',
    LEFTBAR = 'leftBarConfig'
}

// 定义默认设置值
const DEFAULT_SETTING = {
    background: {
        type: 1, // 1. 静态背景 2. 动态背景 3. 偏移背景
        belong: 1, // 1. 系统自带 2. 自定义上传
        staticSrc: 'http://localhost:5600/imgs/background-image/static/1.jpg', // 静态背景
        dynamicSrc: 'http://localhost:5600/imgs/background-image/dynamic/1.mp4',
        blur: 0, // 模糊
        effect: 3, // 背景动效 1. snow 2. bubble 3. empty
        uploadFileSize: 5, // 单位M
    },
    common: {
        isGuide: false
    },
    leftBarConfig: {
        width: 60
    },
    search: {
        translate: false // 开启翻译
    },
    widget: {
        widgetSize: 70, // 块大小
        gap: 40, // 块间距,
        widgetTitleSize: 16, // 标题字体大小
        widgetTitleColor: '#ffffffae' // 标题字体颜色
    }
}

export const useSettingStore = defineStore('setting', () => {
    const setting = ref({...DEFAULT_SETTING})

    const widgetSize = computed(() => setting.value.widget.widgetSize)
    const widgetGap = computed(() => setting.value.widget.gap)
    const widgetTitleSize = computed(() => setting.value.widget.widgetTitleSize)
    const widgetTitleColor = computed(() => setting.value.widget.widgetTitleColor)

    const backgroundType = computed(() => {
        switch (setting.value.background.type) {
            case 1:
                return 'StaticBackground'
            case 2:
                return 'DynamicBackground'
            default:
                return 'ParallaxBackground'
        }
    })

    const backgroundSrc = computed(() => {
        switch (setting.value.background.type) {
            case 1:
                return setting.value.background.staticSrc
            case 2:
                return setting.value.background.dynamicSrc
            default:
                return ""
        }
    })

    const backgroundEffect = computed(() => {
        switch (setting.value.background.effect) {
            case 1:
                return 'SnowEffect'
            case 2:
                return 'BubbleEffect'
            default:
                return 'EmptyEffect'
        }
    })

    /**
     * 通用更新设置接口
     * @param {*} payload payload: {module: "模块名称", key: "", value: ""}
     */
    const updateSetting = <K extends keyof typeof DEFAULT_SETTING>(
        payload: {
            module: K
            key: keyof typeof DEFAULT_SETTING[K]
            value: any
        }
    ) => {
        const { module, key, value } = payload
        if (!module) throw new Error(`更新失败, 未传module参数`)
        if (!(module in setting.value)) throw new Error(`更新失败, 不存在模块: ${module}`)

        // 类型断言保证 key 存在于对应模块中
        const moduleSettings = setting.value[module]
        if (!(key in moduleSettings)) {
            throw new Error(`更新失败, 模块 ${module} 中不存在属性: ${String(key)}`)
        }

        moduleSettings[key] = value
    }


    const init = (config: any) => {
        // 初始化设置
        setting.value = {...DEFAULT_SETTING, ...config}
    }

    const resetToDefault = () => {
        // 重置为默认设置
        setting.value = {...DEFAULT_SETTING}
    }

    return {
        setting,
        // getter
        widgetSize,
        widgetGap,
        widgetTitleSize,
        widgetTitleColor,
        backgroundType,
        backgroundSrc,
        backgroundEffect,
        uploadFileSize: setting.value.background.uploadFileSize,
        // action
        init,
        updateSetting,
        resetToDefault
    }
}, {
    // 持久化配置
    persist: {
        key: 'setting',
        storage: localStorage
    }
})
